<template>
  <div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="col-11 col-sm-8 col-lg-6 col-xl-4 col-xxl-4">
      <form class="border shadow-sm rounded p-4">
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">用户名</label>
          <input v-model="loginInfo.username" type="email" :class="['form-control', { 'is-invalid': loginInfo.usernameMsg }]" id="exampleInputEmail1" aria-describedby="emailHelp">
          <!-- <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div> -->
          <div class="invalid-feedback">
           {{ loginInfo.usernameMsg }}
          </div>
        </div>
        <div class="mb-3">
          <label for="exampleInputPassword1" class="form-label">密码</label>
          <input v-model="loginInfo.password" type="password" :class="['form-control', { 'is-invalid': loginInfo.passwordMsg }]" id="exampleInputPassword1">
          <div class="invalid-feedback">
           {{ loginInfo.passwordMsg }}
          </div>
        </div>
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="exampleCheck1">
          <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
         <div class="d-flex flex-column align-items-center px-1">
          <button type="submit" class="btn btn-primary w-100 mb-2 text-light" @click="submit">登录</button>
          <router-link to="/reg" class="border rounded w-100 text-center">
            <button type="submit" class="btn ">注册</button>
          </router-link>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import axios from '../../utils/axios'
import { computed, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const loginInfo = reactive({
  username: '',
  usernameMsg: computed(() => {
    if (loginInfo.username && !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(loginInfo.username)) {
      return '请输入正确的邮箱'
    }
    return ''
  }),
  password: '',
  passwordMsg: computed(() => {
    if (loginInfo.password && loginInfo.password.length < 6) {
      return '密码长度不能小于6'
    }
    return ''
  })
})

async function submit() {
  router.push('/home')
  // axios.post('/auth/login', loginInfo)
  // .then(res => {
  //   console.log({ res })
  // })
}
async function getUser() {
  const res = await axios.get('/user/get')
  console.log({ res })
}

// getUser()
</script>

<style scoped>
</style>